<template>
    <el-row class="tac">
        <el-col :span="24">
            <el-menu default-active="2" class="el-menu-vertical-demo" :collapse="isCollapse" @open="handleOpen" @close="handleClose" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
                <!-- 一级 -->
                <template v-for="(item, index) in menu">
                    <router-link :key="index" v-if="!item.children" :to="'/layout/' + item.path">
                        <el-menu-item :index="item.path">
                            <i :class="item.meta.icon"></i>
                            <span slot="title">{{ item.meta.title }}</span>
                        </el-menu-item>
                    </router-link>

                    <el-submenu :index="item.path" v-else :key="index">
                        <template slot="title">
                            <i :class="item.meta.icon"></i>
                            <span>{{ item.meta.title }}</span>
                        </template>
                        <el-menu-item-group>
                            <router-link v-for="item1 in item.children" :key="item1.name" :to="'/layout/' + item.path + '/' + item1.path">
                                <el-menu-item index="1-1">
                                    <i :class="item1.meta.icon"></i>
                                    <span>{{ item1.meta.title }}</span>
                                </el-menu-item>
                            </router-link>
                        </el-menu-item-group>
                    </el-submenu>
                </template>
            </el-menu>
        </el-col>
    </el-row>
</template>

<script>
import eventBus from '@/utils/eventBus.js';
export default {
    data() {
        return {
            menu: [],
            isCollapse: false,
        };
    },
    created() {
        this.menu = this.$store.state.routes[1].children;

        // 接收从兄弟组件(面包屑组件)传来的参数
        eventBus.$on('transfer', m => {
            console.log(m);
            this.isCollapse = m;
        });
    },

    methods: {
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        },
    },
};
</script>

<style lang="less" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
}
</style>
